مقالات کامل و جامع طراحی اپلیکیشن

در مقاله پیشین گزینش رنگ مطلوب در پباده سازی بحثی را آغاز کردم در زمینه ی اینکه چرا برای پیش از استارت پباده سازی یک وب سایت یا این که برنامه می بایست طراحی اپلیکیشن برای تعیین طیف رنگ پروژه برهه زمانی کافی بگذاریم. لطفا در صورتی اون مقاله را نخوندید پیش از خوندن ادامه این متن، بخش نخستین را بخونید.

۳- ضابطه‌های معیار به کارگیری از هر رنگ در پروژه
مهمترین نکته رنگبندی در طرح ساخت توازن در آن میباشد. هر چه این ساخت توازن بهتر صورت پذیرد در ورژن پایانی، مخاطب هم ذوق زده‌خیس میباشد. این ساخت‌و‌ساز توازن هم از آن کارهایی میباشد که دسترسی به آن برای کلیه طراحان فعالیت معمولی‌ای وجود ندارد.

شاید در نگاه اولیه براتون خیره کننده باشه البته اینجانب می‌خوام پباده سازی داخلی، مُد و نهایتا پباده سازی دیجیتال را با هم مخلوط کنم تا منظورم را به شما منتقل کنم.

ضابطه رنگ ۶۰ / ۳۰ / ۱۰
این ضابطه رنگی در «پباده سازی داخلی» زیاد به کارگیری می شود. او‌لین توشه هم در همین فیلد ساخته شد. این ضابطه میگه در یک اطراف یا این که اتاق واحد سنجش به کارگیری از رنگ‌ها این چنین باشه:

۶۰٪ رنگ اساسی
۳۰٪ رنگ دوم یا این که رنگ تکمیل کننده
۱۰٪ رنگی که بایستی دقت اشخاص را جلب نماید
در پباده سازی رنگ دوم تحت عنوان حامی رنگ مهم تلقی می شود. برای همین تعیین صحیح رنگ دوم تاثیر متعددی روی کیفیت آخرین فعالیت داره. در تصویرهای تحت شما می‌تونید به کارگیری صحیح از این ضابطه را در پباده سازی داخلی و مد ملاحظه کنید:

ضابطه ۶۰ - ۳۰ - ۱۰

نیازی به توضیح وجود ندارد ولی طبق به عبارتی ساختاری که گفتم به ترتیب رنگ «دیوار» ، «کاناپه» و نهایتا «کوسن‌‌ها» از فرمول ۶۰ - ۳۰ - ۱۰ تبعیت می‌نماید.

استعمال از ضابطه ۶۰ - ۳۰ - ۴۰ در مُد

ولی چطور از ۶۰ - ۳۰ - ۱۰ در طراحی سایت یا این که نرم افزار به کار گیری کنیم؟

نخستین از کلیه توضیح بدم که‌این ضابطه نیازی به رعایت بدون نقص نداره. یعنی نیاز وجود ندارد که خط‌کش بردارید و مطمئن باشید که دقیقا در ۶۰٪ طرحتون از رنگ اساسی به کارگیری کرده. غرض این ضابطه ساخت توازن صحیح در طرح میباشد اکنون شاید پاره ای هم این عددها نادر یا این که زیاد شوند که خیلی هم خوبه.

بریم سراغ اینکه این ۳ رنگ چه‌گونه به کار گیری می گردند.

رنگ ۶۰٪:
این ۶۰ درصد در پباده سازی داخلی تحت عنوان رنگ مهم شناخته می شد البته در پباده سازی UI -اکثر اوقات- اینطور وجود ندارد. فرض نمایید که در صورتی‌که قرار بود ۶۰٪ از ویرگول آبی باشه با چه فاجعه‌ای رو به رو می‌شدیم.

این ۶۰٪ میتونه به عبارتی خلأ (فضای منفی) باشه. خلأ برخلاف اسمی که داره خیلی روی طرح آخرین شما تاثیر داره. لطفا در تمامی طراحیاتون به‌این مسئله اعتنا فرمایید و از اون سرسری عبور نکنید. این خلأ بک گراندی هم که برای طرحتون تعیین کردید را دربرگیرنده میشه.

رنگ ۳۰٪:
این یکی از رنگ موفق شما میباشد. بسته به زمینه و کاغذ‌ای که پباده سازی می کنید این رنگ شاید تغییر‌و تحول کنه. برای مثال در همین ورقه که دارید این مقاله را میخونید رنگ ۳۰٪ به عبارتی رنگ طوسی متن میباشد.

رنگ ۱۰٪
رنگی محتوا و المانی که بایستی دقت مخاطب را به خویش جلب نماید. در به کارگیری از این رنگ زیاده روی نکنید تا استفاده کننده با آن اُنس نگیرد و هر توشه آن را روءیت کرد به طور اتومات توجهش به آن جلب گردد. معمولا از این رنگ برای CTA (یا این که به عبارتی Call to Action) به کارگیری میکنیم.

برای عده ای که نمی‌دونن CTA چیه یه توضیح بی آلایش میدم که زمانی از مخاطب میخواهید کاری را انجام دهد از CTA به کارگیری میکنید. برای مثال در هدر ویرگول وقتی که شما در تارنما لاگین نباشید دکمه ورود یا این که نام نویسی برای ما حکم CTA را داراست. و در صورتی لاگین باشید دکمه تایپ کردن پست جایگزین آن میگردد. در صفحه های متفاوت ما CTA های متعدد داریم.

در‌این نوشته‌ی‌علمی ، کمپانی پلاتین ، به آنالیز کتابخانه react navigation خوا‌هیم پرداخت.

درین نوشته‌علمی به معرفی طریق ساخت‌و‌ساز نرم افزار‌های ری‌اکت با طراحی اپلیکیشن به کار گیری از ورژن کتابخانه React Native Navigation میپردازیم. ورژن دوم کتابخانه React Native Navigation جدیداً تکثیر یافته میباشد. به همین ادله ، در‌این نوشته سعی کرده‌ایم به معرفی و تحلیل آن بپردازیم. این کتابخانه یک پیاده‌سازی از ناوبری نیتیو و خیر یک پیاده‌سازی بر طبق جاوا اسکریپت می‌باشد. این بدان معنا است که‌این کتابخانه به صورت معمول سعی بالاتری داشته و از تعامل‌ها و گذار کاغذ سرازیر‌تری در مقایسه با دیگر چاره‌هایی که پیاده‌سازی نیتیو ندارند شامل است.

ورژن ۲ کتابخانه React Native Navigation یک ویرایش از ورژن نخستین این کتابخانه است که بعضی از خطاها آن را که در ورژن نخستین پیدا شدند رفع نموده است. درین راهنما طریق ایجاد یک گردش فعالیت احراز نام و نشان حقیقی و واقعی را میسازیم که یک مشابه‌سازی از شرایط احراز نام‌و‌نشان با به کارگیری از AsyncStorage میباشد. ولی می توانید از هر ارائه‌دهنده خدمت احراز نام و نشان که خودتان گزینش میکنید به کار گیری فرمایید.

گردش فعالیت چه‌گونه است؟

react native navigation
زمانی که اپ بارگذاری میگردد، یک کامپوننت مقداردهی (Initializing) ابتدایی را لود میکنیم. در به عبارتی هین آنالیز می‌ خواهد شد که آیا کاربری در خاطر دستگاه ذخیره شده‌است یا این که نه. درصورتی که کاربری در یاد دستگاه وجود داشته باشد، مسیر Home را در یک ناوبری مبنی بر stack رندر می کنیم.

در حالتی که کاربری در خاطر دستگاه جانور نباشد، کامپوننت‌های auth (یعنی SignIn و SignUp) را در یک ناوبری بر طبق tab پیگیری میکنیم.

react native navigation
 

ابتدا فعالیت
در اولِ عمل ، بایستی یک پروژه ری‌اکت نیتیو را با استعمال از React Native CLI بسازیم:

۱
react-native init RNNav2
بعد از npm یا این که ya برای نصب ناوبری ری‌اکت نیتیو به کار گیری میکنیم:

۱
۲
۳
npm install react-native-navigation@alpha
# or
ya add react-native-navigation@alpha
اکنون بایستی تعلق‌های نیتیو را پیوند کرده و پاره ای کد نیتیو نیز بنویسیم.

ساخت و ساز فولدر‌ها
در‌این مرحله ، پوشه‌هایی که برای این نرم‌افزار نیاز می‌باشند را ساخت‌و‌ساز می کنیم. نخست یک فولدر به اسم src در دایرکتوری root ساخت‌و‌ساز می کنیم تا همگی چیز را در آن بنویسیم:

۱
mkdir src
آنگاه پوشه‌های ذیل را در دایرکتوری src میسازیم:

۱
۲
cd src
touch config.js Home.js Initializing.js SignIn.js SignUp.js screens.js navigation.js Screen2.js
درحال حاضر کارکرد این فولدر‌ها را توضیح می‌دهیم:

پوشه config.js: این فولدر بعضی داده ها تنظیمات مقدماتی اپ را در خویش مکان میدهد که درباره ی نمونه بالا دربرگیرنده کلید AsyncStorage برای بازیابی استفاده کننده از یاد میباشد.

فولدر Home.js: این پوشه در شکل آمدن مخاطب به اکانت، دربرگیرنده کامپوننت خواهد بود.

فولدر Initializing.js: این فولدر منطق مقداردهی نخستین را در خویش مکان داده و در طول لود برنامه یک پیام تحت عنوان خروجی برای استفاده کننده نشان می دهد.

پوشه Signin.js / SignUp.js: این فولدر‌ها مشتمل بر فرم‌های نام نویسی و ورود استفاده کننده می‌باشند. در فولدر Signin.js یک بازهدایت استفاده کننده به برگه Home نیز درنظرگرفته شده میباشد.

فولدر screens.js: این پوشه تنظیمات ورقه را برای کتابخانه React Native Navigation در خویش مکان داده میباشد.

فولدر navigation.js: این پوشه تابع‌های ناوبری را در خویش مکان میدهد. ما دو تابع مهم به اسم‌های ()goToAuth و ()goHome داریم.

پوشه Screen۲.js: این پوشه دربرگیرنده کامپوننت دیگری برای ناوبری به/از ورقه مهم اپ میباشد که از ناوبری پشته‌ای stack سود می گیرد.

تثبیت کردن کاغذ‌ها
در حین به کارگیری از React Native Navigation می بایست هریک از شیت‌ها را که در نرم‌افزار ما استعمال شود تثبیت کرد.

به‌این خواسته از متد registerComponent در کتابخانه React Native Navigation به کار گیری میشود. کلیه کاغذ‌هایی را که می خواهیم مقداردهی کنیم، در یک تابع منفرد قرار میدهیم و آن را قبل از ساخت و ساز root ناوبری خویش فراخوانی میکنیم.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
// screens.js

import {Navigation} from 'react-native-navigation';

export function registerScreens() {
  Navigation.registerComponent('Home', () => require('./Home').default);
  Navigation.registerComponent('Initializing', (sc) => require('./Initializing').default);
  Navigation.registerComponent('SignIn', () => require('./SignIn').default);
  Navigation.registerComponent('SignUp', () => require('./SignUp').default);
  Navigation.registerComponent('Screen2', () => require('./Screen2').default);
}
در‌این کد ، یک تابع را ساخت‌و‌ساز و اکسپورت کرده‌ایم که ()Navigation.registerComponent را روی هر کامپوننتی که میخواهیم در ناوبری خویش داشته باشیم، فراخوانی می‌نماید.

تثبیت کردن اپ
آن گاه پوشه index.js را طوری به‌روزرسانی می کنیم که پشته ناوبری ابتدایی نرم افزار تهیه و تنظیم و مقداردهی خواهد شد.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
// index.js
import {Navigation} from 'react-native-navigation';
import {registerScreens} from './src/screens';

registerScreens();

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'Initializing'
      }
    },
  });
});
در کد فوق تابع registerScreens را ایمپورت و فراخوانی میکنیم.

همینطور ریشه ابتدایی پشته نرم‌افزار را با فراخوانی Navigation.setRoot گزینش کرده و مسیرهای اول را که میخواهیم برنامه ما رندر نماید به آن ارسال می کنیم. دراین مورد root یک کامپوننت منفرد، به اسم کاغذ Initializing خواهد بود.

ساخت و ساز تابع‌های ناوبری
فعلا، نوبت به تولید یک‌سری تابع با امکان استعمال دوباره رسیده میباشد که می‌اقتدار از آن برای انتخاب ریشه پشته‌های مسیر باطن نرم‌افزار سود گرفت.

مسیر ریشه یا این که root به عبارتی جایی می‌باشد که پشته مسیر مهم را در آن تعریف‌و‌تمجید می کنیم. ما میخواهیم آیتم ریست کردن پشته‌ی ریشه را به مسیرهای احراز نام و نشان و یا این که در شکل داخل شدن مخاطب، به خویش نرم افزار حقیقی وواقعی در دست داشته باشیم:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
// navigation.js
import { Navigation } from 'react-native-navigation'

export const goToAuth = () => Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          component: {
            name: 'SignIn',
            options: {
              bottomTab: {
                fontSize: ۱۲,
                text: 'Sign In',
                icon: require('./signin.png')
              }
            }
          },
        },
        {
          component: {
            name: 'SignUp',
            options: {
              bottomTab: {
                text: 'Sign Up',
                fontSize: ۱۲,
                icon: require('./signup.png')
              }
            }
          },
        },
      ],
    }
  }
});

export const goHome = () => Navigation.setRoot({
  root: {
    stack: {
      id: 'App',
      children: [
        {
          component: {
            name: 'Home',
          }
        }
    ],
    }
  }
})
تصاویری که برای شیت‌های فوق به کار گیری میکنیم، به طور ذیل می‌باشند. شما میتوانید آن‌ها‌را ذخیره کرده و گزینه به کارگیری قرار دهید.

تصویر صفحه ورود (SignIn):

تصویر صفحه نام نویسی (SignUp):

در فولدر navigation.js دو تابع مو جود هست:

goToAuth – این تابع پشته مسیر ریشه مارا به تنظیمات مسیر bottomTabs تهیه و تنظیم می‌نماید. هر شیت یک کامپوننت میباشد که اسم و بعضا مورد‌ها برای آن تنظیمات شده‌است.
goHome – این تابع پشته مسیر را به طور ناوبری stack گزینش می‌نماید و یک کامپوننت منفرد را به آرایه فرزندان یعنی کامپوننت Home ارسال می‌نماید.
ذخیره‌سازی کلید AsyncStorage در یک فولدر تنظیمات
ما به محاسبه AsyncStorage میپردازیم تا ببینیم آیا استفاده کننده تا قبل از اینً نام نویسی نموده است یا این که نه. این عمل در یکسری فولدر شکل می گیرد. کلید AsyncStorage را در یک فولدر غیروابسته ذخیره میکنیم تا بتوانیم آن را به آسانی گزینه به کار گیری دوباره در اختیار بگذاریم.

۱
۲
// config.js
export const USER_KEY = 'USER_KEY'
تولید صفحه ها
فعلا همگی تنظیمات‌های ناوبری را که ما یحتاج بوده را ساخت و ساز کرده‌ایم و نوبت به آن رسیده میباشد که شیت‌ها و کامپوننت‌هایی که آیتم استعمال قرار خوا هیم بخشید را بسازیم.

پوشه Initializing.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
// Initializing.js
import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  AsyncStorage
} from 'react-native'

import { goToAuth, goHome } from './navigation'

import { USER_KEY } from './config'

export default class Initialising extends React.Component {
  async componentDidMount() {
    try {
      const user = await AsyncStorage.getItem(USER_KEY)
      console.log('user: ', user)
      if (user) {
        goHome()
      } else {
        goToAuth()
      }
    } catch (err) {
      console.log('error: ', err)
      goToAuth()
    }
  }

  render() {
    retu (
      
        Loading
      
    )
  }
}

const styles = StyleSheet.create({
  welcome: {
    fontSize: ۲۸
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
در صورتی به کلاس componentDidMount نگاه نمایید می بینید که اکثر اوقات شغل های عمده در‌این فولدر شکل می گیرند. ما AsyncStorage را آنالیز میکنیم تا ببینیم آیا کاربری در خاطر دستگاه ذخیره شده‌است یا این که خیر و در شرایطی که که چنین حالتی وجود داشته باشد شیت Home را لود می کنیم و در غیر این شکل مسیرهای Auth یعنی SignIn و SignUp را لود خوا‌هیم کرد.

هنگامی که کلاس componentDidMount منطق موردنیاز برای نظارت ذخیره شدن استفاده کننده در دستگاه را اجرا می‌نماید؛ یک پیام لود را برای کاربری اکران میدهیم. آن‌گاه پشته مسیر را بر مبنای این که استفاده کننده جانور میباشد یا این که خیر ریست میکنیم.

پوشه Home.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
// Home.js
import React from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  AsyncStorage
} from 'react-native'
import { goToAuth } from './navigation'
import {Navigation} from 'react-native-navigation';

import { USER_KEY } from './config'

export default class Home extends React.Component {
  static get options() {
    retu {
      topBar: {
        title: {
          text: 'Home'
        },
      }
    };
  }
  logout = async () => {
    try {
      await AsyncStorage.removeItem(USER_KEY)
      goToAuth()
    } catch (err) {
      console.log('error signing out...: ', err)
    }
  }
  render() {
    retu (
      
        Hello from Home screen.
                   onPress={this.logout}
          title="Sign Out"
        />
                   onPress={() => {
            Navigation.push(this.props.componentId, {
              component: {
                name: 'Screen2',
              }
            });
          }}
          title="View next screen"
        />
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
در‌این پوشه یک پیام ابتدایی را برای مخاطب رندر می کنیم و این آیتم را در مشت ایشان قرار می دهیم که یا این که از اپ بیرون گردد و یا این که به مسیر دیگری برود.

یک نکته گوناگون که می بایست درین نصیب گزینه اشاره قرار اعطا کرد، نحوه فراخوانی متدهای ناوبری میباشد. ما به مکان به کار گیری از props مانند ورژن سابق (this.props.navigator.push) یعنی API مرتبط با Navigation را ایمپورت کرده و Navigation.push را فراخوانی می کنیم.

همینطور متوجه یک تابع کلاس استاتیک به اسم ()get options می‌شویم. این تابع را می‌اقتدار به تعریف‌و‌تمجید کامپوننت ری‌اکت برگه اضافه کرد و مدل‌بندی و مشخصه‌ها را در ظاهر ناوبری خاطر نشان نمود. درخصوص نمونه گزینه ارزیابی، ما فقطً یک مشخصه تیتر برای topBar به کارگیری کرده‌ایم.

پوشه Screen۲.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
import React from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
} from 'react-native'
import {Navigation} from 'react-native-navigation';

export default class Screen2 extends React.Component {
  static get options() {
    retu {
      topBar: {
        title: {
          text: 'Screen 2'
        },
      }
    };
  }
  render() {
    retu (
      
        Screen ۲
                   onPress={() => Navigation.pop(this.props.componentId)}
          title="Go Back"
        />
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
این پوشه یک کاغذ به طور کاملً ابتدایی می‌باشد که فقطً برای اکران ناوبری در یک ناوبری پشته‌ای از کاغذ Home گزینه به کار گیری قرار می‌ گیرد. نکته‌ای که بایستی اشاره نمود، روش فراخوانی تابع Navigation.pop است. این طریق نیز از ورژن سابق API که در آن از props استعمال میشد (this.props.navigator.pop) متعدد هست و در ورژن ۲ از API Navigation ایمپورت گردیده از کتابخانه React Native Navigation با اسم استعمال می کنیم.

پوشه SignUp.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
// SignUp.js
import React from 'react'
import {
  View,
  Button,
  TextInput,
  StyleSheet
} from 'react-native'

export default class SignUp extends React.Component {
  state = {
    useame: '', password: '', email: '', phone_number: ''
  }
  onChangeText = (key, val) => {
    this.setState({ [key]: val })
  }
  signUp = async () => {
    const { useame, password, email, phone_number } = this.state
    try {
      // here place your signup logic
      console.log('user successfully signed up!: ', success)
    } catch (err) {
      console.log('error signing up: ', err)
    }
  }

  render() {
    retu (
      
                   style={styles.input}
          placeholder='Useame'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('useame', val)}
        />
                   style={styles.input}
          placeholder='Password'
          secureTextEntry={true}
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('password', val)}
        />
                   style={styles.input}
          placeholder='Email'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('email', val)}
        />
                   style={styles.input}
          placeholder='Phone Number'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('phone_number', val)}
        />
                   title='Sign Up'
          onPress={this.signUp}
        />
      
    )
  }
}

const styles = StyleSheet.create({
  input: {
    width: ۳۵۰,
    height: ۵۵,
    backgroundColor: '#۴۲A5F5',
    margin: ۱۰,
    padding: ۸,
    color: 'white',
    borderRadius: ۱۴,
    fontSize: ۱۸,
    fontWeight: '۵۰۰',
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
پوشه SignUp.js اینک فقطً یک محیط خالی برای فرم نام نویسی به حساب می‌آید. می‌قدرت از این محیط برای پیاده‌سازی خدمت احراز نام و نشان آیتم استعمال منفعت گرفت.

فولدر SignIn.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
// SignIn.js
import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  AsyncStorage
} from 'react-native'

import { goHome } from './navigation'
import { USER_KEY } from './config'

export default class SignIn extends React.Component {
  state = {
    useame: '', password: ''
  }
  onChangeText = (key, value) => {
    this.setState({ [key]: value })
  }
  signIn = async () => {
    const { useame, password } = this.state
    try {
       // login with provider
       const user = await AsyncStorage.setItem(USER_KEY, useame)
       console.log('user successfully signed in!', user)
       goHome()
    } catch (err) {
      console.log('error:', err)
    }
  }
  render() {
    retu (
      
                   style={styles.input}
          placeholder='Useame'
          autoCapitalize="none"
          autoCorrect={false}
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('useame', val)}
        />
                   style={styles.input}
          placeholder='Password'
          autoCapitalize="none"
          secureTextEntry={true}
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('password', val)}
        />
                   title='Sign In'
          onPress={this.signIn}
        />
      
    )
  }
}

const styles = StyleSheet.create({
  input: {
    width: ۳۵۰,
    fontSize: ۱۸,
    fontWeight: '۵۰۰',
    height: ۵۵,
    backgroundColor: '#۴۲A5F5',
    margin: ۱۰,
    color: 'white',
    padding: ۸,
    borderRadius: ۱۴
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
فولدر SignIn.js
این کامپوننت مشتمل بر یک فرم نام نویسی بی آلایش است. در متد کلاسی signIn یک نام نویسی برنده را با انتخاب مشخصه اسم کاربری در AsyncStorage مشابه‌سازی کرده‌ایم و استفاده کننده را به شیت Home هدایت میکنیم. در حال حاضر بایستی بتوانیم اپ را اجرا کنیم:

رویش چشمگیر اسمارت فون ها در سال های اخیر سبب به ارتقاء 52.2 درصدی ترافیک صفحه ها اینترنت در تلفن همراه شده‌است.

با روی عمل وارد شدن اسمارت فون های متنوع با بها های مقرون به صرفه، تعلق ما به اسمارت فون ها بیش تر از پیش گردیده و از این رو گسترش دهندگان در تعیین برنامه های نیتیو و هایبرید مقداری مبتلا سردرگمی میگردند.

اهمیت رابط و تجربه کاربری در توسعه و گسترش برنامه های تلفن همراه

مشتری یک کدام از جوانب اساسی از روند بسط نرم افزار به حساب میآید و پیش از تصمیم گیری در رابطه پلتفرم گزینه استعمال، می بایست مشتری را مد حیث قرار دهید.

مشتری شما اهمیت چندانی به تکنولوژی و پلتفرمی که برای ایجاد برنامه گزینه استعمال قرار دادید، نمیکند.

آنچه برای مشتری اصلی میباشد، کاری میباشد که نرم افزار تان برایش انجام می دهد. با این اوصاف میتوان ذکر داشت که رابط و تجربه کاربری مهم‌ترین جنبه از نرم‌افزار می باشند که برای یوزرها نیز از اهمیت بالایی برخوردارند.

در صورتی‌که نرم افزار شما باگ و مشگلی داشته باشد، 79 درصد از مشتریان بعداز او‌لین استعمال، آن را یک یا این که دو توشه دیگر نیز آزمون میکنند، این در حالی میباشد که 16 درصد از یوزرها بیشتراز دو توشه کارایی نمی‌کنند و اقبال مجدد ای به اپ نمیدهند و آن را از روی تلفن همراه شان تمیز میکنند.

یک نگاه اجمالی به برنامه های نیتیو و هایبرید

برنامه نیتیو اپلیکیشنی میباشد که برای اجرا در یک پلتفرم یا این که دستگاه خاص مانند اندروید، آی وی اس، بلک بری یا این که ویندوز پباده سازی و ایجاد شده است.

نرم افزار نیتیو برای یک پلتفرم گوشی خاص کدنویسی و ساخته می گردد و از گویش اپلیکیشن نویسی نیتیو نیز برای ایجاد آن به کار گیری می‌شود:

آی وی اس (Objective-C و سوئیفت)
اندروید (جاوا و کاتلین)
ویندوز فون (سی شارپ)
بسط دهندگان بایستی راهبرد ها و ضوابط خاص هرمورد از پلتفرم ها را رعایت کرده و تایپوگرافی، استایل های گرافیکی، جسچرها، افکت های بصری و ... را با اعتنا به‌این اصول پیاده سازی نمایند.

گسترش نرم افزار هایبرید

برنامه هایبرید اپلیکیشنی میباشد که یک توشه ساخته و کدنویسی می گردد و برای اجرا روی چند پلتفرم مانند آی وی اس، اندروید و ویندوز فون قابل به کارگیری میباشد.

اپ های هایبرید در واقعیت ترکیبی از برنامه های نیتیو و اینترنت نرم افزار ها می باشند و یک برنامه واحد می باشند که بر روی تلفن همراه های آیفون، اندروید و ویندوز فون به نیکی فعالیت میکنند.

سعی ظاهری این برنامه ها مانند اپ های نیتیو میباشد، البته در واقع با به کار گیری از وبسایتی اجرا می شوند که با به کارگیری از HTML ،CSS و Javascript تشکیل شده اند. نرم افزار یک اپلیکیشن بر پایه ی اینترنت میباشد که به طور برنامه نیتیو اکران داده گردیده و به hardware موبایل پیوند می خورد.

مزایای گسترش اپ نیتیو

اجرای قابل انعطاف و جاری

در توسعه و گسترش نرم‌افزار نیتیو می بایست برای هر مورد از لهجه های نرم‌افزار نویسی منحصر سیستم دلیل های موردنظرتان، کدنویسی فرمائید.

از این رو ورژن های زیادی از یک نرم افزار داریم که برای هرمورد از پلتفرم ها تشکیل شده اند. از‌آنجا که هر ورژن برای پلتفرم خاصی تشکیل‌شده، به نرمی و به طور جاری روی آن اجرا می شود.

سرعت

از‌آن‌جا‌که برنامه برای سیستم ادله آی وی اس و اندروید باصرفه گردیده، از دید سرعت و همت حاصل بهتری را از خویش به اکران می‌گذارد.

در ساخت و ساز و توسعه و گسترش نرم‌افزار های نیتیو، موردها زیادی از قبیل مصرف باتری و یاد مد لحاظ قرار داده می‌شود. پیاده سازی جسچرهای متعدد در اپ های نیتیو نیز معمولی خیس و ریلکس خیس میباشد.

تجربه کاربری

برنامه تلفن همراه می بایست به نحوی ساخته گردد که مخاطب در او‌لین به کار گیری از آن، حذفش نکند، به عبارت دیگر می بایست اپ با نیازمندی ها و انتظارات یوزرها هم خوانی داشته باشد.

اپ های نیتیو از این حیث کارایی بهتری را به اکران می‌گذارند و از حیث اسکرول، تشخیص جسچرهای متعدد، افکت ها و برنامه کودکان ها و ... بهتر پیاده سازی گردیده اند.

حفاظت از داده ها و امنیت

قابلیت به کارگیری کارآمد از منابع دشوار افزاری، فقط در برنامه های نیتیو قابلیت پذیر میباشد.

انعطاف پذیری

با به کارگیری از برنامه نیتیو، سریع خیس و بهتر میتوان به دوربین، طراحی اپلیکیشن جی پی اس، روزنگار، میکروفون و بقیه امکان های موبایل دسترسی پیدا کرد.

از طرف دیگر در بسط برنامه های هایبرید محدودیت هایی وجود داراست و برنامه می بایست بر روی پلتفرم های متفاوت، تلاش مشابهی را به اکران گذارد.

در برنامه های نیتیو هیچ محدودیتی نیست و هر عملیاتی که با تکنولوژی مختص به پلتفرم قابل پیاده سازی باشد را میتوان انجام بخشید.

فردی سازی

با وجود اشکال و اقسام موبایل های اندروید در بازار، فقط با استعمال از توسعه و گسترش نیتیو میتوان لی اوت را روی این موبایل ها با اندازه شیت اکران مختلف به یک شکل اکران بخشید.

یک سری سال پیشین نرم افزار کلمه ای نامانوس بود که در معاش روزانه ما کاربرد متعددی نداشت ولی امروز معاش سوای اپ ها خیلی دشوار خواهد بود. تمامی ما در حین روز از نرم افزار های متعدد جهت هدف ها متعدد به کار گیری می‌کنیم و هرچه دراین مورد خاطر بگیریم برایمان جذابیت دارااست. طراحی اپلیکیشن واقعیت این میباشد که دنیای فناوری هر روز متاع جدیدی به بازار میدهد که اسم و تعریف‌و‌تمجید خاص خودش را دارااست با یادگرفتن این مفاهیم خواهیم توانست با راحتی بیشتری نیازهایمان را برآورده کنیم. Web app و اپلیکیشن تلفن همراه دومفهوم بسیار مجاورت میباشد که بهتر میباشد با تعریف‌و‌تمجید آنان بیشتر آشنا شویم. اپلیکیشن تلفن همراه چه می‌باشد؟ نرم افزار تلفن همراه طرحی میباشد که به وسیله متخصصان پباده سازی و پیاده سازی گردیده تابر روی گوشی، تبلت و بقیه دستگاه های گوشی آیتم به کارگیری قرار بگیرد. این اپلیکیشن برای یوزرها آخرین تلفن هوشمند پباده سازی گردیده و از این رو آسانی به کارگیری و ساختار قابل ادراک برای آن از اهمیت بالایی برخوردار‌است که هم در اپ نویسی و هم پباده سازی بایستی رعایت خواهد شد. برای اخذ نرم‌افزار گوشی می بایست قطعا به خدمت وب دسترسی داشته باشید. ولی Web app مفهومی میباشد که تماما گوناگون میباشد. اینترنت نرم افزار چه است؟ اینترنت نرم‌افزار (Web app) اپلیکیشن یا این که قابل انعطاف افزاری میباشد که از روش مرورگر ها و وب در مشت یوزرها قرار میگیرد. قابل انعطاف افزارهای Web app بر روی یک سرور قرار میگیرند و مخاطب از روش نشانی ip  یا این که URL  به بخش های گوناگون Web app دسترسی خواهد داشت. مهم‌ترین حسن Web app دسترسی سوای محدودیت وقتی و مکانی میباشد که برای اکثری از کارمندان شرکتهای و سازمان ها یک  فرمان ضروری جهت دسترسی به داده ها کمپانی در اسرع وقت میباشد. Web app در همگی دستگاه ها اعم از گوشی، تبلت و … به سهولت اجرا می‌گردد. کاربرد Web app و برنامه تلفن همراه دامنه استعمال نرم‌افزار گوشی بسیار وسیع میباشد. اپلیکیشن گوشی در مورد ها گوناگون اعم از بازی، تجاری، آموزشی ،مدل معاش، سرگرمی، توریسم ، کاربردی، کتاب، سالم و تناسب اندام،طعام و آب میوه،فایده وری، ترانه ، ورزش،خبری،شبکه های عمومی،پزشکی و جهت یابی کاربرد دارااست. بنابراین شفاف میباشد که اپلیکیشن گوشی برای مجموعه های گوناگون انسانی و در مقام های سنی گوناگون قابل به کارگیری و کاربردی میباشد. Web app هم کاربرد بسیار پهناور ای دارااست البته مورد ها به کار گیری آن منحصر به فرد خیس بوده و به جهت اینکه بسط و پیاده سازی آن هزینه بیشتری نسبت به اپلیکیشن تلفن همراه داراست برای موردها منحصر ایجاد و اجرایی میشود. بیشترین به کار گیری کنندگان Web app شرکتهای و سازمان ها می‌باشند. پیاده سازی قابل انعطاف افزارهای ذیل اینترنت و یک پارچه در بستر تلفن همراه واینترنت به عنوان مثال مهم ترین کاربردهای Web app به شمار می رود. در شرایطی‌که قرارباشد یک تارنما یا این که پرتال در دست یک سری سازمان قراربگیردو از راز عبور هاست به کارگیری نمایند طراحی وب سایت نرم‌افزار شایسته ترین مورد میباشد. چرا پباده سازی Web app گران میباشد؟ برای تایپ کردن Web app می قدرت از گویش های متفاوت نرم‌افزار نویسی بهره برد تعیین لهجه مطلوب بکار بردن گروه ماهر و کارشناس، کدنویسی، آزمایش وسایر پروسه عمل احتیاج به صرف بازه متعددی دارااست. گروه متخصصی که Web app می نویسد هزینه بالایی میبرد. اما متخصصان بر مبنای نیاز های متفاوت میتوانند Web app با مخارج مختلفی هم ایجاد نمایند. یک مصرف بی آلایش برای مقر اطلاعتی مجموعه پزشکی حتما هزینه کمتری نسبت به مخارج اینترنت اپ پیچیده یک وزارت منزل دارااست با این وجود هزینه اینترنت نرم افزار مسلما از نرم‌افزار گوشی بیشتر خواهد بود.